<template>
  <div class="">
    <nil-page icon="search" title="数据查询" margin-bottom>
      <nil-search :form="search_form" @search="search"></nil-search>
    </nil-page>

    <nil-page icon="paperclip" title="数据列表">
      <template #option>
        <el-button type="primary" @click="handleAdd()"> 添加 </el-button>
      </template>
      <nil-thin-table
        :data="tableData"
        :columns="demo_columns"
        :loading="tableDataLoading"
      >
        <template #option="{ row }">
          <el-button type="primary" @click="handleEdit(row)"> 修改 </el-button>
          <el-button type="danger" @click="handleDelete(row)"> 删除 </el-button>
        </template>
      </nil-thin-table>
      <div style="margin-top: 10px">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :page-size="page.size"
          :total="page.total"
          @current-change="pageChange"
        ></el-pagination>
      </div>
    </nil-page>
    <el-drawer
      v-model="addAndChangeBox"
      :title="`${isChange ? '修改' : '创建'}`"
      direction="rtl"
      destroy-on-close
      size="40%"
    >
    </el-drawer>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { demo_columns } from "@/config/table.sys";
import { search_form } from "@/config/search.form";
// import api from "@/http/api";

import {} from "@/http/uri";
import { ElMessageBox } from "element-plus";
// 表 是否 加载中
const tableDataLoading = ref(false);
// 表数据 - 默认数据 需要删除
const tableData = ref([{ name: "我是数据", account: "我是数据" }]);
const page = reactive({
  cur: 1,
  size: 10,
  total: 0,
  key: "",
});

function pageChange(cur) {
  page.cur = cur;
  initData();
}

// 加载数据
const initData = () => {
  tableDataLoading.value = true;
};

// vue 生命周期 hook
onMounted(() => {
  // TODO
});

// 搜索
const search = ({ key }) => {
  page.cur = 1;
  page.key = key ?? "";
  initData();
};

// 是否修改的状态
const isChange = ref(false);

// 加载中
// const oneDataLoading = ref(false);

// 模态框是否显示
const addAndChangeBox = ref(false);
// TODO 实体类数据
const oneData = reactive({
  demo: "",
});

// 添加 - 弹出页
function handleAdd() {
  // 将实体类 赋值 为空
  oneData.demo = "";

  isChange.value = false;
  addAndChangeBox.value = true;
}

// 修改 - 弹出页
function handleEdit(row) {
  // 将实体类 赋值 为表格中的内容
  // 当当然 若是只有id 则 需要请求数据
  oneData.demo = row.demo ?? "";

  isChange.value = true;
  addAndChangeBox.value = true;
}

// 删除 (row)
const handleDelete = () => {
  ElMessageBox.confirm(`是否要进行 删除 操作, 是否继续?`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // TODO 删除操作
    })
    .catch(() => {});
};
</script>
